@mixin css3($property, $value...) {
    -khtml-#{$property}: $value;
    -webkit-#{$property}: $value;
    -moz-#{$property}: $value;
    -ms-#{$property}: $value;
    -o-#{$property}: $value;
    #{$property}: $value;
}

body {
    font-family: 'Open Sans', sans-serif;
}

.alert{
    @include css3(border-radius, 0);
}

.container-fluid{
    padding: 0;
    margin: 0;
}

#w0.navbar{
    @include css3(border-radius, 0);
    margin-bottom: 0;

    #w1{
        padding: 25px 0;

        li a{
            padding: 10px 30px;
            margin-left: 10px;
            color: #999;
            font-size: 15px;
            @include css3(border-radius, 5px);
            @include css3(transition, all 0.6s);
        }

        li.active a, li a:hover{
            background-color: #26aae1;
            color: #eee;
        }
    }

    .navbar-brand{
    }
}

#tpl-intro{
    background-image: url("/image/intro-bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: 0 50%;
    padding: 90px 0 70px 0;

    .heading-line{
        width: 54px;
        height: 4px;
        background: #26aae1;
        display: block;
        margin: 20px 0;
    }

    p{
        font-size: 18px;
        color: #4a4f53;
        margin-bottom: 30px;
    }

    .intro-btn{
        border-radius: 26px;
        padding: 6px 28px;
        background: #26aae1;
        font-size: 22px;
        color: #fff;
        outline: 0;
        border: 2px solid #26aae1;
        margin-bottom: 20px;    
        @include css3(transition, all 0.6s);
    }

    .intro-btn:hover{
        background-color: #fff;
        border: 2px solid #e3e3e5;
        background-position: 0 -15px;
        color: #e85f1b;
    }
}

.contact-wrap{
    #map-canvas{
        width: 100%;
        height: 600px;
        border: 1px solid #ccc;
    }   

    #save-widget {
        width: 300px;
        box-shadow: rgba(0,0,0,0.29804) 0px 1px 4px -1px;
        background-color: white;
        padding: 10px;
        font-family: Roboto, Arial;
        font-size: 13px;
        margin: 15px;
    }
}

#tpl-account{
    padding: 80px 0;

    .t-a-sh{
        padding:0 10px;
    }
    
    .t-s-at-wrap{
        padding: 10px;
        position: relative;

        .t-s-at{
            padding: 10px;
            background-color: #00a8ec;
            border: 3px solid #00a8ec;
            cursor: pointer;
            color: #fff;
            position: relative;

            span{
                font-size: 16px;
            }
        
            img{
                @include css3(border-radius, 50%);
                margin-right: 10px;
                height: 48px;
                width: 48px;
            }

            .fa-banner{
                position: absolute;
                top: -2px;
                right: -2px;
                border-width: 20px;
                border-style: solid;
                border-radius: 0 4px 0 0;
                border-color: #3A539B #3A539B transparent transparent;

                .fa{
                    position: absolute;
                    top: -14px;
                    right: -15px;
                    color: #fff 
                }
            }

           
        }

        .t-s-at:hover{
            opacity: 0.8;
            filter: alpha(opacity=80);
        }

        .fa-check{
            display: none;
            position: absolute;
            bottom: 20px;
            right: 40px;
            font-size: 50px;
            color: #2ECC71;
        }
    }

    .t-s-at-wrap.active{
        .fa-check{
            display: inline-block;
        }
    }
}

#tpl-services{
    background: #eeeef0;
    padding: 40px 0;

    .t-s-info-wrap{
        padding: 10px;
        .t-s-info{         
            background: #fff;
            text-align: center;
            padding: 40px 15px 20px 15px;

            .fa{
                width: 100px;
                height: 100px;
                line-height: 100px;
                @include css3(border-radius, 8px);
                margin: 0 auto 25px;
                font-size: 40px;
                color: #fff;
            }

            .fa-cogs{
                background-color: #D35400;
            }

            .fa-html5{
                background-color: #F9BF3B;
            }

            .fa-users{
                background-color: #3A539B;
            }

            .fa-desktop{
                background-color: #26A65B;
            }
        }
    }
}

#tpl-social-connect{
    padding: 60px 20px;
    background-color: rgba(108, 122, 137, 0.8);
    margin-bottom: 40px;

    h1{
        color: #fff;
        text-transform: uppercase;
        margin-bottom: 40px;
    }

    .t-s-c-wrap{
        padding: 10px;

        .fa{
            height: 100px;
            width: 100%;
            line-height: 100px;
            font-size: 60px;
            text-align: center;
            background-color: #4B77BE;
            color: #fff;
            cursor: pointer;
            @include css3(border-radius, 5px);
            @include css3(transition, all 0.6s);
        }

        .fa:hover{
            opacity: 0.8;
            filter: alpha(opacity=80);
        }
    }
}

footer{
    background: #eeeef0;
    padding: 20px 0; 

    .copy{
        font-size: 17px;
    }

    .share-div{

        .fa{
            display: inline-block;
            color: #fff;
            width: 30px;
            line-height: 30px;
            text-align: center;
            margin-left: 20px;
            text-decoration: none;
        }

        .fa-facebook {
            background: #3c5a9a;
        }

        .fa-twitter {
            background: #2daae0;
        }

        .fa-google-plus {
            background: #ee4f2f;
        }

        .fa-linkedin {
            background: #1b5690;
        }
    }
}

.s-n-p-tpl{
    margin-top: 40px;

    .s-n-p-wrap{
        padding: 10px;
        cursor: pointer;

        .s-n-p{
            padding: 10px;
            background-color: #F2F1EF;
            color: #333;
            position: relative;

            h4{
                font-size: 16px;
                line-height: 1.7;
                letter-spacing: 0.2px;
                margin-top: 0;
            }

            time{
                font-size: 13px;
            }

            a{
                color: #333;
            }

            img{
                width: 100%;
                margin-bottom:10px;
            }

            .s-n-p-st{
                span{
                    margin-right: 20px;

                    .fa{
                        margin-right: 5px;
                    }
                }
            }

            .fa-times{
                display: none;
                position: absolute;
                font-size: 80px;
                opacity: 0.5;
                top: 0;
                right: 0;
                color: #F64747;
            }
        }

        .s-n-p.delete{
            .fa-times{
                display: inline-block;
            }
        }
    }

    .del-btn{
        margin-top: 10px;
        outline: 0;
    }
}


.error-wrap.ng-hide{
    opacity: 0;
}

.error-wrap{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    opacity: 1;
    .msg{
        font-size: 16px;
    }
}
